<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>光山县旅游产业监控中心</title>
    <link rel="stylesheet" href="./assets/plugin/M_select/M_select.css">
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/lvyoujia_yjzh.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
</head>
<body>
<div class="box">
    <!--头部-->
    <div class="title-box">
        <div class="title-left">
            <span id="weather">小雨转晴</span>
            <span id="temperature">32/23℃</span>
            <span id="windPower">东风</span>
        </div>
        <div class="title-img">
            <h3>光山县旅游产业监控中心</h3>
            <img src="./assets/images/title-bg.png">
        </div>
        <div class="title-right">
            <a href="./admin.html">运营管理</a>
        </div>
    </div>
    <!--主体-->
    <div class="main-box">
        <!--导航-->
        <div class="nav-box">
            <ul>
                <li>
                    <a href="index.html">
                        <div>
                            <img src="./assets/images/icon-index.png">
                            <img src="./assets/images/icon-index-active.png">
                        </div>
                        <p>大数据人流热力图</p>
                    </a>
                </li>
                <li>
                    <a href="./chanye_jq.html">
                        <div>
                            <img src="./assets/images/icon-analysis.png">
                            <img src="./assets/images/icon-analysis-active.png">
                        </div>
                        <p>行业运行监测及统计</p>
                    </a>
                </li>
                <li>
                    <a href="./industryDevelopment.html">
                        <div>
                            <img src="./assets/images/icon-operation.png">
                            <img src="./assets/images/icon-operation-active.png">
                        </div>
                        <p>行业发展监测及统计</p>
                    </a>
                </li>
                <li class="active">
                    <a href="./lvyoujia_qx.html">
                        <div>
                            <img src="./assets/images/icon-activity.png">
                            <img src="./assets/images/icon-activity-active.png">
                        </div>
                        <p>第三方数据处理和呈现</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--数据内容-->
        <div class="content-box flex-column">
            <div class="content-nav">
                <ul class="active">
                    <li>
                        <a href="./lvyoujia_qx.html">气象</a>
                    </li>
                    <li>
                        <a href="./lvyoujia_jt.html">交通</a>
                    </li>
                    <li class="active">
                        <a href="./lvyoujia_yjzh.html">视频监控</a>
                    </li>
                </ul>
            </div>
            <div class="content-main flex-row flex1">

                <div class="content-center flex3">
                    <div class="flex1 map-box bounceInUp animated">
                        <div class="map" id="myMap">

                        </div>
                        <!--视频监控-->
                        <div class="video-box hd">
                            <video src="http://124.164.243.86:19004/play.html?serial=34020000002000000002&code=34020000001310002023&iframe=yes&aspect=fullscreen&autoplay=yes&share=no&ptz=no" controls=""></video>
                        </div>
                        <!--待接警-->
                        <div class="map-prop map-prop-wait">
                            <a href="javascript:;" class="close-btn"><img src="./assets/images/close.png" alt=""></a>
                            <h3 class="prop-title">事件报警<span>(待接警)</span></h3>
                            <p>上报时间:2020/07/16 12:23</p>
                            <p>上报单位:大阳古镇</p>
                            <p>上报人电话:15837569852</p>
                            <p>事件类型:自然灾害</p>
                            <p>位置:龙山湖国家湿地公园</p>
                            <p>上报描述:龙山湖国家湿地公园失火，请求协助</p>
                            <div class="btn-list">
                                <a href="javascript:;" id="monitor-btn">视频监控</a>
                                <a href="javascript:;" id="supplies-btn">应急物资</a>
                                <a href="javascript:;" id="task-btn">接警</a>
                            </div>
                        </div>
                        <!--接警-->
                        <div class="task-prop jiejing-box">
                            <a href="javascript:;" class="close-btn"><img src="./assets/images/close.png" alt=""></a>
                           <h3>接警</h3>
                            <div class="task-item">
                                <label>事件接警</label>
                                <div class="item-content">
                                    <div class="btn-list">
                                        <a href="javascript:;" class="active">正常接警</a>
                                        <a href="javascript:;" id="normal-btn">无效报警</a>
                                        <a href="javascript:;" id="repeat-btn">重复报警</a>
                                    </div>
                                </div>
                            </div>
                            <div class="task-item">
                                <label>事件判定</label>
                                <div class="item-content">
                                    <div class="select-box">
                                        <select name="" id="event-type" class="event">
                                            <option value="0">自然灾害</option>
                                            <option value="1">突然公共卫生事件</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="task-item">
                                <label>应急预案</label>
                                <div class="item-content">
                                  <div class="result-box">
                                    <p>自然灾害防范预警实施方案</p>
                                    <a href="javascript:;" class="del-btn">
                                        <img src="./assets/images/icon-del.png" alt="">
                                    </a>
                                  </div>
                                  <a href="javascript:;" class="add-btn">+选择应急预案</a>
                                </div>
                            </div>
                            <div class="task-item">
                                <label>应急物资</label>
                                <div class="item-content">
                                  <div class="result-box">
                                    <p><span>120救护车</span><span>张明15265845525</span></p>
                                    <a href="javascript:;" class="del-btn">
                                        <img src="./assets/images/icon-del.png" alt="">
                                    </a>
                                  </div>
                                  <a href="javascript:;" class="add-btn">+选择应急物资</a>
                                </div>
                            </div>
                            <div class="task-item">
                                <label>值守人员</label>
                                <div class="item-content">
                                  <div class="result-box">
                                    <p>安全组-张明15256258455</p>
                                    <a href="javascript:;" class="del-btn">
                                        <img src="./assets/images/icon-del.png" alt="">
                                    </a>
                                  </div>
                                  <a href="javascript:;" class="add-btn">+添加值守人员</a>
                                </div>
                            </div>
                            <button>任务下发</button>
                        </div>
                        <!-- 指挥调度 -->
                        <div class="task-prop zhihui-box">
                            <a href="javascript:;" class="close-btn"><img src="./assets/images/close.png" alt=""></a>
                            <h3>指挥调度</h3>
                            <div class="task-item">
                                <label>应急预案</label>
                                <div class="item-content">
                                  <div class="result-box">
                                    <p>自然灾害防范预警实施方案</p>
                                    <a href="javascript:;" class="del-btn">
                                        <img src="./assets/images/icon-del.png" alt="">
                                    </a>
                                  </div>
                                  <a href="javascript:;" class="add-btn">+选择应急预案</a>
                                </div>
                            </div>
                            <div class="task-item">
                                <label>应急物资</label>
                                <div class="item-content">
                                  <div class="result-box">
                                    <p><span>120救护车</span><span>张明15265845525</span></p>
                                    <a href="javascript:;" class="del-btn">
                                        <img src="./assets/images/icon-del.png" alt="">
                                    </a>
                                  </div>
                                  <a href="javascript:;" class="add-btn">+选择应急物资</a>
                                </div>
                            </div>
                            <div class="task-item">
                                <label>值守人员</label>
                                <div class="item-content">
                                  <div class="result-box">
                                    <p>安全组-张明15256258455</p>
                                    <a href="javascript:;" class="del-btn">
                                        <img src="./assets/images/icon-del.png" alt="">
                                    </a>
                                  </div>
                                  <a href="javascript:;" class="add-btn">+添加值守人员</a>
                                </div>
                            </div>
                            <button>任务下发</button>
                        </div>
                        <!--处理中-->
                        <div class="map-prop map-prop-doing">
                            <a href="javascript:;" class="close-btn"><img src="./assets/images/close.png" alt=""></a>
                            <h3 class="prop-title">事件报警<span>(处理中)</span></h3>
                            <p>上报时间:2020/07/16 12:23</>
                            <p>上报单位:大阳古镇</p>
                            <p>上报人电话:15837569852</p>
                            <p>事件类型:自然灾害</p>
                            <p>位置:龙山湖国家湿地公园</p>
                            <p>上报描述:龙山湖国家湿地公园失火，请求协助</p>
                            <hr>
                            <p>应急预案:自然灾害防范预警实施方案</p>
                            <p>值守人员</p>
                            <p>安全组-张明 15868543258</p>
                            <p>接警时间:2020/07/16 12:25</p>
                            <p>消防组-李斯 15868543258</p>
                            <p>接警时间:2020/07/16 12:25</p>
                            <div class="btn-list">
                                <a href="javascript:;" id="monitor-btn1">视频监控</a>
                                <a href="javascript:;" id="supplies-btn1">应急物资</a>
                                <a href="javascript:;" id="zhihui-btn">指挥调度</a>
                                <a href="javascript:;" id="line-btn">现场连线</a>
                                <a href="javascript:;" id="comp-btn">处理完成</a>
                            </div>
                        </div>
                        <!--视频连线-->
                        <div class="line-monitor">
                            <a href="javascript:;" class="close-btn"><img src="./assets/images/close.png" alt=""></a>
                            <div class="title">
                                <h3>张明</h3>
                                <p>连线中...</p>
                            </div>
                            <div class="bottom-box">
                                <div>
                                    <a href="javascript:;"><img src="./assets/images/jingyin.png" alt=""><span>静音</span></a>
                                    <a href="javascript:;"><img src="./assets/images/qiehuan.png" alt="" id="change-line"><span>切换到语音聊天</span></a>
                                    <a href="javascript:;"><img src="./assets/images/yinliang.png" alt=""><span>音量</span></a>
                                </div>
                                <a href="javascript:;" class="guaduan"><img src="./assets/images/guaduan.png" alt=""></a>
                            </div>
                        </div>
                        <!--语音连线-->
                        <div class="line-audio">
                            <a href="javascript:;" class="close-btn"><img src="./assets/images/close.png" alt=""></a>
                            <div class="title">
                                <h3>张明</h3>
                                <img src="./assets/images/circle.png" alt="">
                            </div>
                            <div class="bottom-box">
                                <a href="javascript:;" class="guaduan"><img src="./assets/images/guaduan.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- 事件 -->
<div class="yjzh-pop event-pop">
    <a href="javascript:;" class="close">
        <img src=".//assets/images/close.png">
    </a>
    <h3>强对流蓝色预警</h3>
    <p>山西省气象台2020年8月4日16时36分发布强对流蓝色预警，预警区域：太原、临汾、朔州、运城、忻州、吕梁、晋中、晋城、大同、长治、阳泉。预计未来24小时预警区域内有阵雨或雷阵雨，部分地区可能出现短时强降水、雷暴大风、冰雹等强对流天气。请有关单位和人员做好防范准备。</p>
</div>
<!-- 预案 -->
<div class="yjzh-pop yuan-pop">
    <a href="javascript:;" class="close">
        <img src=".//assets/images/close.png">
    </a>
    <h3>强对流应急预案</h3>
    <p>防御指南：1.政府及相关部门按照职责做好防短时暴雨、防雷、防大风准备工作，气象部门做好人工防雹作业准备；2.户外行人和工作人员减少户外活动，注意远离棚架广告牌等搭建物，避免在空旷处行走，尽量躲避在室内，避免在大树、高耸孤立物下躲避雷雨，尽量避免在雷雨时拨打接听手机；3.驱赶家禽、牲畜进入有顶蓬的场所，关好门窗加固棚舍；4.检查城市、农田排水系统，做好排涝准备和对山洪、滑坡、泥石流等灾害的防御准备。</p>
</div>
<script src="./assets/plugin/jquery.min.js"></script>
<script src="./assets/plugin/layer/layer.js"></script>
<script src="./assets/plugin/ECharts/echarts.js"></script>
<script src="./assets/plugin/M_select/M_select.js"></script>
<script src="./assets/js/public.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY"></script>
<script>
 $('#yuan-weather').click(function(){
     $('.yuan-pop').addClass('active')
 })
 $('#weather-btn').click(function(){
     $('.event-pop').addClass('active')
 })
 $('.yjzh-pop>.close').click(function(){
    $(this).parent().removeClass('active')
 })
$(".event").M_select({
        // 手动添加下拉款图片（以html页面为起始位置写路径）
        "Img": "./assets/plugin/M_select/up6.png",
        "Img2": "./assets/plugin/M_select/down6.png",
        "radius": "4px",
        "width":"26px",
        "height":"26px",
        // "Title": "选择景区",
        "inputName": "selected_value",
        // 默认选中的值（参数值写需要选中的select的value值）
        "selected": "0",
        Succee: function () {
            var typeSite = $('#event-type').val()
            console.log(typeSite)
        }
    });
    // 百度地图API功能
    var map = new BMap.Map("myMap", {minZoom:7,maxZoom:15}, { enableMapClick: false });
    var point = new BMap.Point(114.925246,32.015172);    // 初始化地图,设置中心点坐标
    map.centerAndZoom(point, 14);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    map.setMapStyle({style: 'midnight'})
    //默认地图样式(normal)
    //清新蓝风格(light)
    //黑夜风格(dark)
    //清新蓝绿风格(bluish)
    //高端灰风格(grayscale)
    //强边界风格(hardedge)
    //青春绿风格(darkgreen)
    //浪漫粉风格(pink)
    //午夜蓝风格(midnight)
    //自然绿风格(grassgreen)
    //精简风格(googlelite)
    //红色警戒风格(redalert)
    var blist = [];
    var districtLoading = 0;
    //设置样式
    map.setMapStyle({
        styleJson: [
            {//不显示点信息
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                    "color": "#fffff ",
                    "visibility": "off"
                }
            }
        ]
    });map.setMapStyle({
        styleJson: [
            {//不显示点信息
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                    "color": "#fffff ",
                    "visibility": "off"
                }
            }
        ]
    });

    function getBoundary(){
        //百度地图获取行政区域的对象
        var bdary = new BMap.Boundary();

        bdary.get("光山县", function (rs) {       //获取行政区域

            //以下是获取行政区域的回调
            // map.clearOverlays();        //清除地图覆盖物

            //需要绘制边界多边形的点集合
            var paths = new Array();
            //行政区域点集合，以;分隔的
            var pointliststr = rs.boundaries[0];
            //3获取点数组，push到 paths中
            var pointlist = pointliststr.split(";");
            var firstPoint;
            for(var i =0;i<pointlist.length;i++)
            {

                var tempPt = pointlist[i].split(',');
                var newPoint = new BMap.Point(tempPt[0],tempPt[1]);
                if(i==0){ firstPoint= newPoint;};

                paths.push(newPoint);
            }
            //第一点再推进去，形成一个闭环，构造了多边形的内环
            paths.push(firstPoint);

            //自定义的八个便捷点，从东开始逆时针，东，东北，北，西北，西，西南，南，东南（必须按顺序来）
            paths.push(new BMap.Point(170.672126, 39.623555));
            paths.push(new BMap.Point(170.672126, 81.291804));
            paths.push(new BMap.Point(105.913641, 81.291804));
            paths.push(new BMap.Point(-169.604276,  81.291804));
            paths.push(new BMap.Point(-169.604276, 39.623555));
            paths.push(new BMap.Point(-169.604276, -68.045308));
            paths.push(new BMap.Point(105.913641, -68.045308));
            paths.push(new BMap.Point(170.672126, -68.045308));
            paths.push(new BMap.Point(170.672126, 39.623555));

            //4绘制第一个多边形，覆盖住除行政区外的所有部分,fillColor:填充色，strokeColor：边界颜色（设置透明，否则会有其他线条），strokeOpacity：线条透明，fillOpacity：填充物透明。
            var ply1 = new BMap.Polygon("",
                { fillColor: "#062031", strokeColor: "transparent", strokeOpacity:0,fillOpacity:0.9}); //建立多边形覆盖物
            //将之前形成的点set到多边形对象中
            ply1.setPath(paths);
            //在地图上添加第一个多边形
            map.addOverlay(ply1);  //遮罩物是半透明的，如果需要纯色可以多添加几层


            //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层，绘制出边界线
            var ply = new BMap.Polygon(rs.boundaries[0],
                { strokeWeight: 2, strokeColor: "#000",fillColor: "transparent" });
            map.addOverlay(ply);
            map.setViewport(ply.getPath());    //调整视野
        });
    }
    // //创建并打开窗口
    function openInfo(content, e) {
        var p = e.target;
        console.log(e)
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }
    var opts = {
        width: 100,     // 信息窗口宽度
        height: 24,     // 信息窗口高度
        // title : "信息窗口" , // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    let newIcon = new BMap.Icon("./assets/images/icon-sos.png", new BMap.Size(36, 47));
    let newIcon1 = new BMap.Icon("./assets/images/icon-sos1.png", new BMap.Size(36, 47));
    let newIcon2 = new BMap.Icon("./assets/images/icon-monitor.png", new BMap.Size(36, 47));
    let newIcon3 = new BMap.Icon("./assets/images/icon-car.png", new BMap.Size(36, 47));
    var data_info = [[112.801532,35.672731, "sos报警"],
        [114.770593,31.985041, "sos报警"],
        [114.858268,31.959066, "监控"],
        [114.957153,31.906848, "监控"],
        [114.904836,31.981365, "消防车"],
        [114.850794,31.919108, "消防车"],

    ];
    var radioData = []

    for (var i = 0; i < data_info.length; i++) {

        if(i==0){
            var marker1= new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon:newIcon });  // 创建标注
            var content = data_info[i][2];
            var label1 = new BMap.Label("sos报警");
            marker1.setLabel(label1);
            map.addOverlay(marker1);               // 将标注添加到地图中
            addClickHandler(content, marker1);
        }else if(i==1){
            var marker2= new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon:newIcon1 });  // 创建标注
            var content = data_info[i][2];
            var label2 = new BMap.Label("sos报警");
            marker2.setLabel(label2);
            map.addOverlay(marker2);               // 将标注添加到地图中
            addClickHandler(content, marker2);
        } else if(i==2){
            var marker3= new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon:newIcon2 });  // 创建标注
            var content = data_info[i][2];
            var label3 = new BMap.Label("监控");
            marker3.setLabel(label3);
            // 视频监控
            $('#monitor-btn').click(function () {
                map.addOverlay(marker3);
            })
            addClickHandler(content, marker3);
        }else if(i==3){
            var marker4= new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon:newIcon2 });  // 创建标注
            var content = data_info[i][2];
            var label4 = new BMap.Label("监控");
            marker4.setLabel(label4);
            // 视频监控
            $('#monitor-btn1').click(function () {
                map.addOverlay(marker4);
            })
            addClickHandler(content, marker4);
        } else if(i==4){
            var marker5= new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon:newIcon3 });  // 创建标注
            var content = data_info[i][2];
            var html=`<p style="margin-bottom:10px;">消防车1辆</p><p>张明15265845525</p>`
            var label5 = new BMap.Label("消防车");
            marker5.setLabel(label5);
            // 应急物资
            $('#supplies-btn').click(function () {
                map.addOverlay(marker5);
            })
            addClickHandler(html, marker5);
        } else if(i==5){
            var marker6= new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon:newIcon3 });  // 创建标注
            var content = data_info[i][2];
            var html=`<p style="margin-bottom:10px;">消防车1辆</p><p>张明15265845525</p>`
            var label6 = new BMap.Label("消防车");
            marker6.setLabel(label6);
            // 应急物资
            $('#supplies-btn1').click(function () {
                map.addOverlay(marker6);
            })
            addClickHandler(html, marker6);
        }


    }
    //添加点击事件
    function addClickHandler(html, marker) {
        if(marker==marker1){
            marker.addEventListener("click", function(e) {
                // openInfo(html, e);
                $('.map-prop-wait').show()
                $('.map-prop-doing').hide()
            });
        }else if(marker==marker2){
            marker.addEventListener("click", function(e) {
                // openInfo(html, e);
                $('.map-prop-doing').show()
                $('.map-prop-wait').hide()
            });
        }else if(marker==marker3){
            marker.addEventListener("click", function(e) {
                // openInfo(html, e);
                layer.open({
                    type: 2,
                    title: false,
                    area: ['630px', '360px'],
                    shade: 0.8,
                    closeBtn: 0,
                    shadeClose: true,
                    content: `http://139.129.111.136/in1/templates/wechatmanage/image/1.mp4`
                });
            });
        }else if(marker==marker4){
            marker.addEventListener("click", function(e) {
                // openInfo(html, e);
                layer.open({
                    type: 2,
                    title: false,
                    area: ['630px', '360px'],
                    shade: 0.8,
                    closeBtn: 0,
                    shadeClose: true,
                    content: `http://139.129.111.136/in1/templates/wechatmanage/image/1.mp4`
                });
            });
        }else if(marker==marker5){
            marker.addEventListener("click", function(e) {
                openInfo(html, e);

            });
        }else if(marker==marker6){
            marker.addEventListener("click", function(e) {
                openInfo(html, e);

            });
        }

    }

    // 接警
    $('#task-btn').click(function () {
        $('.task-prop.zhihui-box').hide()
        $('.task-prop.jiejing-box').show()
    })
    // 指挥调度
    $('#zhihui-btn').click(function(){
        $('.task-prop.jiejing-box').hide()
        $('.task-prop.zhihui-box').show()
    })
    // 关闭弹窗
    $('.close-btn').click(function(){
        flag=false
        $(this).parent().hide()
    })
    // 现场连线
    $('#line-btn').click(function(){
        $('.task-prop.jiejing-box').hide()
        $('.task-prop.zhihui-box').hide()
        $('.line-monitor').show()
    })
    // 切换到语音聊天
    $('#change-line').click(function(){
        $('.line-audio').show()
        $('.line-monitor').hide()
    })
    // 处理完成
    $('#comp-btn').click(function(){
        $(this).parents('.map-prop').hide()
    })
    $('#normal-btn').click(function(){
        $(this).parents('.task-prop').hide()
    })
    $('#repeat-btn').click(function(){
        $(this).parents('.task-prop').hide()
    })
    // setTimeout(function(){
    //     getBoundary();
    // }, 200);
    getBoundary();
</script>
</body>
</html>
